<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡牌天赋组合模拟器</title>
    <style>
        :root {
            --primary-color: #f44336;
            --secondary-color: #1CAF50;
        }

        body {
            margin: 0;
            padding: 2px;
            font-family: 黑体, sans-serif;
        }

        .category-tabs {
            display: flex;
            gap: 2px;
            margin-bottom: 2px;
            flex-wrap: wrap;
        }

        .category-tab {
            padding: 2px 2px;
            border: 1px solid #ddd;
            border-radius: 22px;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s;
            background: #f8f9fa;
        }

        .category-tab.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 3px;
            padding: 5px;
            border: 1px solid #eee;
            min-height: 120px;
        }

        .skill-icon {
            position: relative;
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 5px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }

        .skill-icon img {
            width: 100%;
            height: 130px;
            object-fit: contain;
            border-radius: 4px;
        }

        .skill-icon.selected {
            border-color: var(--secondary-color);
            background: rgba(76, 175, 80, 0.1);
        }

        .skill-icon::after {
            content: attr(data-count);
            position: absolute;
            top: 5px;
            right: 5px;
            background: var(--secondary-color);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .skill-name {
            text-align: center;
            font-size: 12px;
            padding: 4px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .selected-skills {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 2px;
            padding: 2px 0;
            border-bottom: 2px solid #eee;
            min-height: 80px;
        }

        .stats {
            display: flex;
            gap: 3px;
            padding: 3px 0;
            font-size: 18px;
            flex-wrap: wrap;
        }

        .stat-item {
            padding: 2px 2px;
            background: #f0f0f0;
            border-radius: 5px;
            display: flex;
            gap: 8px;
        }

        .combinations {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
            margin-top: 5px;
            padding: 2px;
            border: 1px solid #eee;
            border-radius: 5px;
            background: #4CAF50;
        }

        .combo-item {
            padding: 2px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .limit-alert {
            color: #f44336;
            padding: 2px 0;
            display: none;
            position: fixed;
            top: 2px;
            right: 2px;
            background: white;
            padding: 3px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 新增移动端样式 */
        .mobile-controls {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 10px;
            display: flex;
            gap: 8px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
            z-index: 100;
        }

        .mobile-controls button {
            flex: 1;
            padding: 12px;
            font-size: 14px;
            border-radius: 8px;
            border: 1px solid var(--primary-color);
            background: white;
            color: var(--primary-color);
        }

        @media (max-width: 480px) {
            .skill-icon img {
                height: 100px;
            }
            .category-tab {
                font-size: 16px;
                padding: 4px 8px;
            }
        }
    </style>
</head>
<body>
    <div class="category-tabs" id="categoryTabs"></div>
    <div class="skills-grid" id="skillsGrid"></div>
    <div class="limit-alert" id="limitAlert">已达到最大选择数量（19）！</div>
    <div class="selected-skills" id="selectedSkills"></div>
    <div class="stats" id="stats"></div>
    <div class="combinations" id="combinations"></div>

    <!-- 新增操作按钮 -->
    <div class="mobile-controls">
        <input type="file" id="importFile" style="display:none" accept=".json">
        <button onclick="document.getElementById('importFile').click()">导入配置</button>
        <button onclick="exportConfig()">导出配置</button>
        <button onclick="clearStorage()">重置数据</button>
    </div>

    <script>
        const skills = [
            // 超级星推官
            { id: "chaoji1", category: ["超级星推官","通用"], name: "寸短寸险", image: "img/超级星推官-寸短寸险.png" },
            { id: "chaoji2", category: ["超级星推官","控制者"], name: "盘桓之力", image: "img/超级星推官-盘桓之力.png" },
            { id: "chaoji3", category: ["超级星推官","守护者"], name: "强化时计", image: "img/超级星推官-强化时计.png" },
            
            // 机械领主
            { id: "jixie1", category: ["机械领主","爆破者"], name: "乘势出击", image: "img/机械领主-乘势出击.png" },
            { id: "jixie2", category: ["机械领主","腐蚀者"], name: "攻守兼备", image: "img/机械领主-攻守兼备.png" },
            { id: "jixie3", category: ["机械领主","腐蚀者"], name: "紧急冻结", image: "img/机械领主-紧急冻结.png" },
            { id: "jixie4", category: ["机械领主","控制者"], name: "冷却核心", image: "img/机械领主-冷却核心.png" },
            { id: "jixie5", category: ["机械领主","通用"], name: "战术强化", image: "img/机械领主-战术强化.png" },
            
            // 狂暴丽影
            { id: "kuangbao1", category: ["狂暴丽影","通用"], name: "冰火之力", image: "img/狂暴丽影-冰火之力.png" },
            { id: "kuangbao2", category: ["狂暴丽影","爆破者"], name: "高猛火力", image: "img/狂暴丽影-高猛火力.png" },
            { id: "kuangbao3", category: ["狂暴丽影","控制者"], name: "后勤循环", image: "img/狂暴丽影-后勤循环.png" },
            { id: "kuangbao4", category: ["狂暴丽影","腐蚀者"], name: "欢欣鼓舞", image: "img/狂暴丽影-欢欣鼓舞.png" },
            
            // 流派大师
            { id: "liupai1", category: ["流派大师","守护者"], name: "黑暗吞噬", image: "img/流派大师-黑暗吞噬.png" },
            { id: "liupai2", category: ["流派大师","爆破者"], name: "闪电突袭", image: "img/流派大师-闪电突袭.png" },
            { id: "liupai3", category: ["流派大师","腐蚀者"], name: "水晶石阵", image: "img/流派大师-水晶石阵.png" },
            { id: "liupai4", category: ["流派大师","控制者"], name: "滞空力场", image: "img/流派大师-滞空力场.png" },
            { id: "liupai5", category: ["流派大师","通用"], name: "作战技巧", image: "img/流派大师-作战技巧.png" },
            
            // 美梦成真
            { id: "meimeng1", category: ["美梦成真","控制者"], name: "力场精通", image: "img/美梦成真-力场精通.png" },
            { id: "meimeng2", category: ["美梦成真","守护者"], name: "全面飞升", image: "img/美梦成真-全面飞升.png" },
            { id: "meimeng3", category: ["美梦成真","腐蚀者"], name: "战术增伤", image: "img/美梦成真-战术增伤.png" },
            { id: "meimeng4", category: ["美梦成真","爆破者"], name: "针对打击", image: "img/美梦成真-针对打击.png" },
            
            // 衔风神女
            { id: "xianfeng1", category: ["衔风神女","通用"], name: "出奇制胜", image: "img/衔风神女-出奇制胜.png" },
            { id: "xianfeng2", category: ["衔风神女","腐蚀者"], name: "后援小队", image: "img/衔风神女-后援小队.png" },
            { id: "xianfeng3", category: ["衔风神女","爆破者"], name: "极速救难", image: "img/衔风神女-极速救难.png" },
            { id: "xianfeng4", category: ["衔风神女","控制者"], name: "技术反哺", image: "img/衔风神女-技术反哺.png" },
            { id: "xianfeng5", category: ["衔风神女","控制者"], name: "空战王者", image: "img/衔风神女-空战王者.png" },
            { id: "xianfeng6", category: ["衔风神女","守护者"], name: "十环之力", image: "img/衔风神女-十环之力.png" },
            { id: "xianfeng7", category: ["衔风神女","腐蚀者"], name: "团队力量", image: "img/衔风神女-团队力量.png" },
            { id: "xianfeng8", category: ["衔风神女","通用"], name: "终结时刻", image: "img/衔风神女-终结时刻.png" },
            
            // 异常专家
            { id: "yichang1", category: ["异常专家","腐蚀者"], name: "护盾之力", image: "img/异常专家-护盾之力.png" },
            { id: "yichang2", category: ["异常专家","守护者"], name: "坚毅战神", image: "img/异常专家-坚毅战神.png" },
            { id: "yichang3", category: ["异常专家","爆破者"], name: "深度虚弱", image: "img/异常专家-深度虚弱.png" },
            { id: "yichang4", category: ["异常专家","控制者"], name: "迅捷重击", image: "img/异常专家-迅捷重击.png" },
            { id: "yichang5", category: ["异常专家","爆破者"], name: "要害穿刺", image: "img/异常专家-要害穿刺.png" },
            { id: "yichang6", category: ["异常专家","通用"], name: "异常反应", image: "img/异常专家-异常反应.png" },
            { id: "yichang7", category: ["异常专家","守护者"], name: "浴火还生", image: "img/异常专家-浴火还生.png" },
            { id: "yichang8", category: ["异常专家","通用"], name: "灼烧强化", image: "img/异常专家-灼烧强化.png" },
            
            // 总司令官
            { id: "xiling1", category: ["总司令官","爆破者"], name: "安全第一", image: "img/总司令官-安全第一.png" },
            { id: "xiling2", category: ["总司令官","守护者"], name: "乘胜追击", image: "img/总司令官-乘胜追击.png" },
            { id: "xiling3", category: ["总司令官","爆破者"], name: "火力倾泻", image: "img/总司令官-火力倾泻.png" },
            { id: "xiling4", category: ["总司令官","通用"], name: "全力赴战", image: "img/总司令官-全力赴战.png" },
            { id: "xiling5", category: ["总司令官","守护者"], name: "无限火力", image: "img/总司令官-无限火力.png" },
            { id: "xiling6", category: ["总司令官","腐蚀者"], name: "战术撤退", image: "img/总司令官-战术撤退.png" }
        ];

        const combinations = [
            { require: { "衔风神女": 2 }, effect: "[衔风神女2]：每8秒放个球吸5秒伤害后爆炸：造成吸收伤害的20%" },
            { require: { "衔风神女": 4 }, effect: "[衔风神女4]：增加一个球" },
            { require: { "衔风神女": 6 }, effect: "[衔风神女6]：爆炸后造成5秒的40%易伤" },
            { require: { "流派大师": 3 }, effect: "[流派大师3]：流派大师卡牌效果大幅提升" },
            { require: { "流派大师": 5 }, effect: "[流派大师5]：每张流派大师卡牌提升8%生命和攻击" },
            { require: { "总司令官": 2 }, effect: "[总司令官2]：每消耗10%生命提升3%伤害，最多15层" },
            { require: { "总司令官": 4 }, effect: "[总司令官4]：满5层对低于30%生命的目标伤害增加30%" },
            { require: { "总司令官": 5 }, effect: "[总司令官5]：开始降低50%生命，增加30%单发伤害" },
            { require: { "超级星推官": 1 }, effect: "[超级星推官1]：每个星级提升2.5%伤害" },
            { require: { "超级星推官": 2 }, effect: "[超级星推官2]：每个品质提升15%伤害" },
            { require: { "狂暴丽影": 2 }, effect: "[狂暴丽影2]：使用技能20%机率触发狂暴时刻" },
            { require: { "狂暴丽影": 4 }, effect: "[狂暴丽影4]：狂暴时间增加一倍" },
            { require: { "美梦成真": 2 }, effect: "[美梦成真2]：解锁所有战术" },
            { require: { "异常专家": 3 }, effect: "[异常专家3]：异常增伤提升30%" },
            { require: { "异常专家": 6 }, effect: "[异常专家6]：添加异常提升12%伤害10秒，最多3层" },
            { require: { "美梦成真": 3 }, effect: "[美梦成真3]：所有战术提升至满级" },
            { require: { "机械领主": 2 }, effect: "[机械领主2]：提升50%子弹，每50发提升4%伤害，最多10层" },
            { require: { "机械领主": 4 }, effect: "[机械领主4]：射击有15%机率造成500%攻击的伤害" },
            { require: { "腐蚀者": 3 }, effect: "[腐蚀者3]：每消耗40发子弹，降低目标1%防御，最多50层" },
            { require: { "腐蚀者": 5 }, effect: "[腐蚀者5]：获得主动技能召唤兽攻击目标并降低1%防御并提升英雄30%射速8秒" },
            { require: { "腐蚀者": 8 }, effect: "[腐蚀者8]：召唤盖获得范围腐蚀能力，每5秒添加3层腐蚀效果，叠满50层后射击目标有5%机率造成目标最大生命5%真实伤害，20秒CD" },
            { require: { "守护者": 3 }, effect: "[守护者3]：射击有5%机率吸5%生命和1%攻击，最多20层" },
            { require: { "守护者": 5 }, effect: "[守护者5]：召唤守卫固定位置，在内战技20%减缩并且每2秒回复2.5%生命和4%武器伤害，最多8层" },
            { require: { "守护者": 8 }, effect: "[守护者8]：召唤守卫可以跟随移动并生命双倍，增益双倍" },
            { require: { "控制者": 3 }, effect: "[控制者3]：技能命中20%机率减速目标并对其伤害提升18%" },
            { require: { "控制者": 5 }, effect: "[控制者5]：主动召唤，降低目标40%移动速度，并且对其伤害增加40%" },
            { require: { "控制者": 8 }, effect: "[控制者8]：召唤技能CD减30%，用召唤技能后射击可触发武器单发伤害的150%伤害" },
            { require: { "爆破者": 3 }, effect: "[爆破者3]：英雄使用技能提升6%伤害，最多4层" },
            { require: { "爆破者": 5 }, effect: "[爆破者5]：主动召唤爆破兽蓄力攻击，每次伤害为玩家累积的25%" },
            { require: { "爆破者": 8 }, effect: "[爆破者8]：提升爆破兽6秒存活，爆破兽退场会造成之前伤害的总和" },
            { require: { "通用": 3 }, effect: "[通用3]：大招恢复提升20%" },
            { require: { "通用": 5 }, effect: "[通用5]：主动召唤炮台攻击，继承英雄100%属性10秒" },
            { require: { "通用": 8 }, effect: "[通用8]：使用技能可使炮台伤害提升10%，可叠10层，炮台存在16秒" },
            { require: { "机械领主": 5 }, effect: "[机械领主5]：射击有25%机率造成700%攻击的伤害" }
        ];

        let selectedSkills = [];
        const MAX_SELECTION = 19;

        // 新增存储功能
        function autoSave() {
            localStorage.setItem('cardConfig', JSON.stringify(selectedSkills));
        }

        // 配置文件导出
        function exportConfig() {
            const data = JSON.stringify(selectedSkills);
            const blob = new Blob([data], {type: 'application/json'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `卡牌配置_${new Date().toLocaleDateString()}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 配置文件导入
        document.getElementById('importFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function() {
                try {
                    selectedSkills = JSON.parse(this.result);
                    updateSelectionDisplay();
                    filterSkills(getCurrentCategory());
                    autoSave();
                } catch {
                    alert('配置文件格式错误！');
                }
            }
            reader.readAsText(file);
        });

        // 初始化存储
        function initStorage() {
            const saved = localStorage.getItem('cardConfig');
            if(saved) selectedSkills = JSON.parse(saved);
            updateSelectionDisplay();
        }

        // 重置数据
        function clearStorage() {
            if(confirm('确定要清空所有数据吗？')) {
                selectedSkills = [];
                localStorage.removeItem('cardConfig');
                updateSelectionDisplay();
                filterSkills(getCurrentCategory());
            }
        }

        // 修改后的toggleSkill函数
        function toggleSkill(skillId) {
            const index = selectedSkills.findIndex(s => s === skillId);
            
            if(index === -1) {
                if(selectedSkills.length >= MAX_SELECTION) {
                    showLimitAlert();
                    return;
                }
                selectedSkills.push(skillId);
            } else {
                selectedSkills.splice(index, 1);
            }
            
            updateSelectionDisplay();
            filterSkills(getCurrentCategory());
            autoSave(); // 新增自动保存
        }

        function initCategories() {
            const categories = [...new Set(skills.flatMap(s => s.category))];
            const tabs = document.getElementById('categoryTabs');
            
            categories.forEach(cat => {
                const tab = document.createElement('div');
                tab.className = 'category-tab';
                tab.textContent = cat;
                tab.onclick = () => filterSkills(cat);
                tabs.appendChild(tab);
            });

            if(categories.length > 0) filterSkills(categories[0]);
        }

        function filterSkills(category) {
            document.querySelectorAll('.category-tab').forEach(tab => {
                tab.classList.toggle('active', tab.textContent === category);
            });

            const grid = document.getElementById('skillsGrid');
            grid.innerHTML = skills
                .filter(s => s.category.includes(category))
                .map(s => `
                    <div class="skill-icon ${isSelected(s.id) ? 'selected' : ''}" 
                         onclick="toggleSkill('${s.id}')"
                         data-count="${getSelectedCount(s.id)}">
                        <img src="${s.image}" alt="${s.name}">
                        <div class="skill-name">${s.name}</div>
                    </div>
                `).join('');
        }

        function toggleSkill(skillId) {
            const index = selectedSkills.findIndex(s => s === skillId);
            
            if(index === -1) {
                if(selectedSkills.length >= MAX_SELECTION) {
                    showLimitAlert();
                    return;
                }
                selectedSkills.push(skillId);
            } else {
                selectedSkills.splice(index, 1);
            }
            
            updateSelectionDisplay();
            filterSkills(getCurrentCategory());
        }

        function showLimitAlert() {
            const alert = document.getElementById('limitAlert');
            alert.style.display = 'block';
            setTimeout(() => {
                alert.style.display = 'none';
            }, 2000);
        }

        function updateSelectionDisplay() {
            updateSelectedSkills();
            updateStats();
            updateCombinations();
        }

        function updateSelectedSkills() {
            const container = document.getElementById('selectedSkills');
            container.innerHTML = selectedSkills.map(id => {
                const skill = skills.find(s => s.id === id);
                return `
                    <div class="skill-icon selected" onclick="toggleSkill('${id}')">
                        <img src="${skill.image}" alt="${skill.name}">
                        <div class="skill-name">${skill.name}</div>
                    </div>
                `;
            }).join('');
        }

        function updateStats() {
            const stats = selectedSkills.reduce((acc, id) => {
                const categories = skills.find(s => s.id === id).category;
                categories.forEach(cat => {
                    acc[cat] = (acc[cat] || 0) + 1;
                });
                return acc;
            }, {});

            const statsContainer = document.getElementById('stats');
            statsContainer.innerHTML = Object.entries(stats)
                .map(([cat, count]) => `
                    <div class="stat-item">
                        <span class="category">${cat}</span>
                        <span class="count">${count}</span>
                    </div>
                `).join('');
        }

        function updateCombinations() {
            const currentStats = getCurrentStats();
            const activeCombos = combinations.filter(combo => {
                return Object.entries(combo.require).every(([cat, count]) => {
                    return (currentStats[cat] || 0) >= count;
                });
            });

            const comboContainer = document.getElementById('combinations');
            comboContainer.innerHTML = activeCombos.length > 0 
                ? activeCombos.map(combo => `
                    <div class="combo-item">
                        <div class="combo-effect">✦ ${combo.effect}</div>
                    </div>
                `).join('')
                : '<div class="combo-item">暂无激活的组合效果</div>';
        }

        function isSelected(skillId) {
            return selectedSkills.includes(skillId);
        }

        function getSelectedCount(skillId) {
            return selectedSkills.filter(id => id === skillId).length;
        }

        function getCurrentCategory() {
            return document.querySelector('.category-tab.active')?.textContent;
        }

        function getCurrentStats() {
            return selectedSkills.reduce((acc, id) => {
                const categories = skills.find(s => s.id === id).category;
                categories.forEach(cat => {
                    acc[cat] = (acc[cat] || 0) + 1;
                });
                return acc;
            }, {});
        }


        // 初始化
        initCategories();
        initStorage(); // 新增初始化存储
        window.toggleSkill = toggleSkill;
    </script>
</body>
</html>